<template>
  <div class="internship-container">
    <el-card shadow="never" class="card-wrapper">
      <!-- 搜索栏 -->
      <div class="filter-header">
        <el-input
          v-model="filter.id"
          placeholder="输入编号"
          style="width: 120px"
          class="filter-item"
          clearable
          @keyup.enter.native="handleSearch"
        />
        <el-input
          v-model="filter.name"
          placeholder="输入名称"
          style="width: 120px; margin-left: 10px"
          class="filter-item"
          clearable
          @keyup.enter.native="handleSearch"
        />
        <el-input
          v-model="filter.company"
          placeholder="输入单位名称"
          style="width: 140px; margin-left: 10px"
          class="filter-item"
          clearable
          @keyup.enter.native="handleSearch"
        />
        <el-button 
          type="primary" 
          style="margin-left: 10px"
          @click="handleSearch"
        >
          <i class="el-icon-search"></i> 搜索
        </el-button>
        <el-button 
          style="margin-left: 10px"
          @click="resetSearch"
        >
          <i class="el-icon-refresh"></i> 重置
        </el-button>
      </div>
        <!-- 批量操作和分页信息 -->
        <div class="footer-section">
        <div class="batch-actions">
          <el-button 
            type="danger" 
            :disabled="selection.length === 0"
            @click="batchDelete"
          >
            <i class="el-icon-delete"></i> 批量删除
          </el-button>
          <span class="selected-count" v-if="selection.length > 0">
            已选择 {{ selection.length }} 项
          </span>
        </div>
        <div class="pagination-info">
          第1 到 {{ filteredData.length }} 条，共 {{ filteredData.length }} 条记录。
        </div>
      </div>
      <!-- 数据表格 -->
      <div class="table-wrapper">
        <el-table
          :data="filteredData"
          fit
          header-row-class-name="table-header"
          stripe
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55" align="center"></el-table-column>
          <el-table-column prop="id" label="编号" width="80" align="center"/>
          <el-table-column prop="name" label="名称" width="120"/>
          <el-table-column prop="requirement" label="申请要求" width="120"/>
          <el-table-column prop="start_time" label="开始时间" width="120" align="center"/>
          <el-table-column prop="end_time" label="结束时间" width="120" align="center"/>
          <el-table-column prop="submit_time" label="申请提交时间" width="130" align="center"/>
          <el-table-column prop="company" label="实习单位名称" width="150"/>
          <el-table-column prop="company_info" label="实习单位简介" width="150" show-overflow-tooltip/>
          <el-table-column label="操作" width="180" align="center">
            <template slot-scope="scope">
              <el-button 
                type="primary" 
                size="small"
                @click="handleEdit(scope.row)"
              >
                <i class="el-icon-edit"></i> 修改
              </el-button>
              <el-button 
                type="danger" 
                size="small"
                @click="handleDelete(scope.row)"
              >
                <i class="el-icon-delete"></i> 删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

    
    </el-card>

    <!-- 编辑对话框 -->
    <el-dialog 
      :title="'编辑实习信息 - ' + form.name"
      :visible.sync="editDialogVisible"
      width="50%"
      @closed="handleDialogClosed"
    >
      <el-form 
        :model="form" 
        :rules="rules" 
        ref="form" 
        label-width="120px"
      >
        <el-form-item label="编号" prop="id">
          <el-input v-model="form.id" disabled></el-input>
        </el-form-item>
        <el-form-item label="名称" prop="name">
          <el-input v-model="form.name" placeholder="请输入实习名称"></el-input>
        </el-form-item>
        <el-form-item label="申请要求" prop="requirement">
          <el-input v-model="form.requirement" placeholder="请输入申请要求"></el-input>
        </el-form-item>
        <el-form-item label="开始时间" prop="start_time">
          <el-date-picker
            v-model="form.start_time"
            type="date"
            placeholder="选择开始时间"
            value-format="yyyy-MM-dd"
            style="width: 100%"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间" prop="end_time">
          <el-date-picker
            v-model="form.end_time"
            type="date"
            placeholder="选择结束时间"
            value-format="yyyy-MM-dd"
            style="width: 100%"
            :picker-options="endDateOptions"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="申请提交时间" prop="submit_time">
          <el-date-picker
            v-model="form.submit_time"
            type="date"
            placeholder="选择提交时间"
            value-format="yyyy-MM-dd"
            style="width: 100%"
            :picker-options="submitDateOptions"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="实习单位名称" prop="company">
          <el-input v-model="form.company" placeholder="请输入单位名称"></el-input>
        </el-form-item>
        <el-form-item label="单位简介" prop="company_info">
          <el-input
            type="textarea"
            :rows="3"
            v-model="form.company_info"
            placeholder="请输入单位简介"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitForm">保存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      filter: {
        id: '',
        name: '',
        company: ''
      },
      tableData: [
        {
          id: 4,
          name: '生产实习',
          requirement: '无挂科',
          start_time: '2020-01-02',
          end_time: '2020-02-28',
          submit_time: '2020-01-01',
          company: '华为',
          company_info: '华为技术有限公司是一家生产销售通信设备的民营通信科技公司'
        },
        {
          id: 5,
          name: '软件开发实习',
          requirement: '计算机相关专业',
          start_time: '2020-03-01',
          end_time: '2020-06-30',
          submit_time: '2020-02-15',
          company: '阿里巴巴',
          company_info: '阿里巴巴集团控股有限公司是中国最大的电子商务公司之一'
        },
        {
          id: 6,
          name: '市场营销实习',
          requirement: '市场营销相关专业',
          start_time: '2020-04-01',
          end_time: '2020-07-31',
          submit_time: '2020-03-15',
          company: '腾讯',
          company_info: '腾讯是中国领先的互联网增值服务提供商'
        }
      ],
      selection: [],
      editDialogVisible: false,
      form: {},
      rules: {
        name: [
          { required: true, message: '请输入实习名称', trigger: 'blur' }
        ],
        requirement: [
          { required: true, message: '请输入申请要求', trigger: 'blur' }
        ],
        start_time: [
          { required: true, message: '请选择开始时间', trigger: 'change' }
        ],
        end_time: [
          { required: true, message: '请选择结束时间', trigger: 'change' }
        ],
        submit_time: [
          { required: true, message: '请选择提交时间', trigger: 'change' }
        ],
        company: [
          { required: true, message: '请输入单位名称', trigger: 'blur' }
        ]
      },
      endDateOptions: {
        disabledDate: (time) => {
          if (this.form.start_time) {
            return time.getTime() < new Date(this.form.start_time).getTime()
          }
          return false
        }
      },
      submitDateOptions: {
        disabledDate: (time) => {
          if (this.form.start_time) {
            return time.getTime() > new Date(this.form.start_time).getTime()
          }
          return false
        }
      }
    }
  },
  computed: {
    filteredData() {
      return this.tableData.filter(item => {
        return (
          (this.filter.id === '' || item.id.toString().includes(this.filter.id)) &&
          (this.filter.name === '' || item.name.includes(this.filter.name)) &&
          (this.filter.company === '' || item.company.includes(this.filter.company))
        )
      })
    }
  },
  methods: {
    handleSearch() {
      this.$message({
        message: '搜索完成',
        type: 'success',
        duration: 1000
      })
    },
    resetSearch() {
      this.filter = {
        id: '',
        name: '',
        company: ''
      }
      this.$message({
        message: '已重置搜索条件',
        type: 'info',
        duration: 1000
      })
    },
    handleSelectionChange(val) {
      this.selection = val
    },
    handleEdit(row) {
      this.form = JSON.parse(JSON.stringify(row))
      this.editDialogVisible = true
    },
    handleDelete(row) {
      this.$confirm('确定要删除这条实习信息吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const index = this.tableData.findIndex(item => item.id === row.id)
        if (index !== -1) {
          this.tableData.splice(index, 1)
          this.$message.success('删除成功')
        }
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    },
    batchDelete() {
      if (this.selection.length === 0) return
      
      this.$confirm(`确定要删除选中的 ${this.selection.length} 条实习信息吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const ids = this.selection.map(item => item.id)
        this.tableData = this.tableData.filter(item => !ids.includes(item.id))
        this.selection = []
        this.$message.success(`已删除 ${ids.length} 条记录`)
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    },
    handleDialogClosed() {
      this.$refs.form.resetFields()
    },
    submitForm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          const index = this.tableData.findIndex(item => item.id === this.form.id)
          if (index !== -1) {
            this.tableData.splice(index, 1, { ...this.form })
            this.$message.success('修改成功')
            this.editDialogVisible = false
          }
        }
      })
    }
  }
}
</script>

